<template>
  <BasicDrawer
    v-bind="$attrs"
    :isDetail="true"
    @register="registerDrawer"
    :title="getTitle"
    @ok="handleSubmit"
  >
    <BasicForm
      :labelWidth="200"
      @register="registerForm"
      @submit="handleSubmit"
      :actionColOptions="{ span: 24 }"
    >
      <template #firstImgUrlSlot="{ model, field }">
        <CropperAvatar
          :circled="false"
          :uploadApi="uploadApi"
          v-model:value="model[field]"
          :showBtn="false"
          width="150"
        />
      </template>
      <template #specsSlot>
        <Specs ref="cuisineSpecsRef" :cuisineId="record.id" />
      </template>
      <template #practiceSlot>
        <Practice ref="cuisinePracticeRef" :cuisineId="record.id" />
      </template>
      <template #feed></template>
    </BasicForm>
  </BasicDrawer>
</template>
<script lang="ts">
  import { computed, defineComponent, onMounted, ref, unref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { cuisineFormSchema } from './CuisineAddDrawer.data';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { uploadApi } from '/@/api/sys/upload';
  import { insert, updateById } from '/@/api/cuisine/cuisine';
  import { CropperAvatar } from '/@/components/Cropper';
  import Specs from './components/specs/Index.vue';
  import Practice from './components/practice/Index.vue';

  export default defineComponent({
    name: 'RoleDrawer',
    components: { BasicDrawer, BasicForm, CropperAvatar, Specs, Practice },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      onMounted(() => {});
      const isUpdate = ref(true);

      //表格
      const record = ref({ id: '' });
      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
        await resetFields();
        setDrawerProps({ confirmLoading: false });
        isUpdate.value = !!data?.isUpdate;

        if (unref(isUpdate)) {
          record.value = data.record;
          await setFieldsValue({
            ...data.record,
          });
        }
      });
      const getTitle = computed(() => (!unref(isUpdate) ? '新增菜品' : '编辑菜品'));

      async function handleSubmit() {
        try {
          const values = await validate();
          setDrawerProps({ confirmLoading: true });

          //规格
          if (cuisineSpecsDataList.value) {
            values.cuisineSpecsList = cuisineSpecsDataList.value;
          }

          //做法
          if (cuisinePracticeDataList.value) {
            values.cuisinePracticeList = cuisinePracticeDataList.value;
          }

          if (unref(isUpdate)) {
            await updateById({ id: record.value.id, ...values });
          } else {
            await insert(values);
          }

          closeDrawer();
          emit('success');
        } finally {
          setDrawerProps({ confirmLoading: false });
        }
      }

      const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
        labelWidth: 120,
        schemas: cuisineFormSchema,
        actionColOptions: {
          span: 24,
        },
        submitButtonOptions: { text: '提交' },
      });

      // 规格
      const cuisineSpecsRef = ref<{ getDataSource: () => any; data: any[] } | null>(null);
      const cuisineSpecsDataList = computed(() => {
        return cuisineSpecsRef?.value?.getDataSource();
      });

      //做法
      const cuisinePracticeRef = ref<{ getDataSource: () => any; data: any[] } | null>(null);

      const cuisinePracticeDataList = computed(() => {
        return cuisinePracticeRef?.value?.getDataSource();
      });
      return {
        registerDrawer,
        registerForm,
        getTitle,
        handleSubmit,
        // treeData,
        uploadApi,
        cuisineSpecsRef,
        cuisinePracticeRef,
        cuisinePracticeDataList,
        record,
      };
    },
  });
</script>
